
import { Row, Col, Popover, Button, Modal, Tabs } from 'antd'
import { WeaTransfer, WeaTab } from 'ecCom'
import { observer, inject } from 'mobx-react';
import './index.less'

@inject('analyzeStore')
@observer
class Transfer extends React.Component {
    constructor(props) {
        super(props);
    }
    shouldComponentUpdate(nextProps, nextState) {
        return this.props.visible !== nextProps.visible
            || this.props.options !== nextProps.options
            || this.props.selectedKeys !== nextProps.selectedKeys
    }
    render() {
        const { visible, options, selectedKeys, analyzeStore } = this.props;
        const { changeFormTab, formTab, getOptions } = analyzeStore;
        //options处理 ，获取tab
        let arr = [];
        options.map(item => {
            arr.push(0)
            if (item.tableMark === 'main') {
                arr.push(1)
            } else {
                arr.push(parseInt(item.tableMark.substring(7)) + 1)
            }
        })
        arr = Array.from(new Set(arr));
        // arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        return (
            <Modal ecId={`${this && this.props && this.props.ecId || ''}_Modal@8ngdv6`} className="wf-selectitem-modal"
                width={700}
                visible={visible}
                maskClosable={false}
                title={this.getTopTitle()}
                onCancel={this.cancelEvent.bind(this)}
                footer={[
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@hcgf4u@sure`} type="primary" size="large" onClick={this.confirmEvent.bind(this)}>确定</Button>,
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@n90qmp@clear`} type="ghost" size="large" onClick={this.clearEvent.bind(this)}>清除</Button>,
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v7mt21@close`} type="ghost" size="large" onClick={this.cancelEvent.bind(this)}>关闭</Button>
                ]}
            >
                <div style={{ width: '100%', margin: '0 auto' }}>
                    <div className="wf-selectitem-tab">
                        {/* <span className="leftArrow">  {"<"}  </span> */}
                        <div className="wf-selectitem-nav">
                            {arr.map((item, index) => {
                                return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7151td@${index}`} span={3}>
                                    <div className={`wea-selectitem-navItem ${formTab == index ? 'wea-selectitem-checked' : ''} `}
                                        onClick={() => { changeFormTab(index) }}> {index === 0 ? "全部" : (index === 1 ? "主表" : "明细" + (index - 1))}
                                    </div>
                                </Col>
                            })}
                        </div>
                        {/* <span className="rightArrow">  {">"}  </span> */}
                    </div>
                    <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@a29qxk`} ref="transfer"
                        data={getOptions(options)}
                        selectedKeys={selectedKeys}
                        height={400}
                    />
                </div>
            </Modal>
        );
    }
    getTopTitle() {
        return (
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@6zdd23`}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@a3p0au`} span="8" style={{ paddingLeft: 20, lineHeight: "48px" }}>
                    <div className="wea-workflow-icon">
                        <i className='icon-coms-workflow' />
                    </div>
                    <span>请选择字段</span>
                </Col>
            </Row>
        )
    }
    confirmEvent() {
        this.props.onConfirm(this.refs.transfer.get());
    }
    clearEvent() {
        this.props.onConfirm();
    }
    cancelEvent() {
        this.props.onCancel();
    }
}
export default Transfer;